<template>
  <view class="sww-tabs" :style="[customStyle]">
    <view class="sww-tabs-box" :style="{'--color':vuex_config.themeColor1}">
      <scroll-view class="sww-tab-list" scroll-x :scroll-left="scrollTop" scroll-with-animation >
        <block v-for="(item, index) in list" :key="index">
          <view class="sww-tab-item" @click="tabChange(index, item)">
            <view class="sww-tab-item-inset" :class="{'sww-tab-act': tabAct === index}">
              {{item.name}}
            </view>
          </view>
        </block>
<!--        <view class="sww-tab-line"></view>-->
      </scroll-view>
    </view>
    <view class="sww-tabs-content"></view>
  </view>
</template>
<script>
export default {
  props: {
	  value:{
	  	type:[String,Number],
	  	default:''
	  }, // v-model绑定:当前下标
    // type: {// tab方向，默认水平 row，支持：垂直column
    //   type: String,
    //   default: 'row'
    // },
    list: {
      type: Array,
      default: () => []
    },
	customStyle: { //自定义样式
	  type: Object,
	  default: () => {}
	},
  },
  watch: {
    list: {
      handler(val) {
        this.$nextTick(() => {
          Promise.all([
            this.$getFields('.sww-tab-list'),
            this.$getFields('.sww-tab-item', true)
          ]).then(res => {
            this.tabsWidth = res[0].width
            this.tabWidth = res[1]
          })
        })
      },
      immediate: true
    }
  },
  data() {
    return {
      tabWidth: [],
      tabsWidth: 0,
      tabAct: this.value
    }
  },
  computed: {
    scrollTop() {
      if (this.tabWidth.length > 0) {
        return this.leftTabWidth + this.tabWidth[this.tabAct].width / 2 - this.tabsWidth / 2
      } else {
        return 0
      }
     },
    leftTabWidth() {
      return this.tabWidth.slice(0, this.tabAct).reduce((sum, item) => sum + item.width, 0)
    }
  },
  methods: {
    tabChange(index, item) {
      this.tabAct = index
	  this.$emit('input',index)
      this.$emit('change',item)
    }
  }
}
</script>
<style lang="scss" scoped>
  .sww-tabs {
    width: 100%;
    .sww-tabs-box {
      width: 100%;
      height: 88rpx;
      position: relative;
      // background-color: #FFFFFF;
      .sww-tab-line {
        width: 60rpx;
        height: 4rpx;
        background-color: var(--color);
        position: absolute;
        left: 0;
        bottom: 0;
      }
      .sww-tab-list {
        width: 100%;
        height: 100%;
        white-space: nowrap;
        .sww-tab-item {
          display: inline-block;
          padding: 0 30rpx;
          height: 100%;
          .sww-tab-item-inset {
            height: 100%;
            display: flex;
            align-items: center;
            position: relative;
            font-size: 28rpx;
            &::before {
              content: '';
              width: 0;
              height: 4rpx;
              background-color: var(--color);
              position: absolute;
              left: 50%;
              bottom: 6rpx;
              transform: translate(-50%, 0);
              transition: width 0.3s;
            }
          }
          .sww-tab-act {
            color: var(--color);
            &::before {
              width: 60rpx;
            }
          }
        }
      }
    }
  }
</style>
